<template>
	<div>
		<div class="center">
			<div class="h-20 container mx-auto">
				<el-row justify="space-between" class="height-100p">
					<el-col :sm="6" :xs="12" class="center">
						<h1 class="center">
							<el-image style="height: 50px;" src="./static/logo.png" fit="cover"></el-image>
						</h1>
					</el-col>
					<el-col :sm="18" :xs="0">
						<div class="menu height-100p">
							<el-menu mode="horizontal" :ellipsis="false" text-color="#666">
								<a href="#">
									<el-menu-item index="1" class="menu-item" style="height: 100%;">首页</el-menu-item>
								</a>
								<a href="#news">
									<el-menu-item index="3" class="menu-item" style="height: 100%;">新闻动态</el-menu-item>
								</a>
								<a href="#about-us">
									<el-menu-item index="2" class="menu-item" style="height: 100%;">关于我们</el-menu-item>
								</a>
								<a href="#contact-us">
									<el-menu-item index="4" class="menu-item" style="height: 100%;">联系我们</el-menu-item>
								</a>
							</el-menu>
						</div>
					</el-col>
					<el-col :sm="0" :xs="4">
						<div class="menu width-100p height-100p">
							<el-menu mode="horizontal" :ellipsis="true" text-color="#666"
								class="width-100p height-100p">
								<a href="#">
									<el-menu-item index="1" class="menu-item" style="height: 100%;">首页</el-menu-item>
								</a>
								<a href="#news">
									<el-menu-item index="3" class="menu-item" style="height: 100%;">新闻动态</el-menu-item>
								</a>
								<a href="#about-us">
									<el-menu-item index="2" class="menu-item" style="height: 100%;">关于我们</el-menu-item>
								</a>
								<a href="#contact-us">
									<el-menu-item index="4" class="menu-item" style="height: 100%;">联系我们</el-menu-item>
								</a>
							</el-menu>
						</div>
					</el-col>
				</el-row>
			</div>
		</div>

		<div class="w-full carousel">
			<unicloud-db collection="opendb-banner" v-slot:default="{data, loading, error, options}">
				<el-carousel :interval="5000" arrow="always" height="600px">
					<el-carousel-item v-for="(item, index) in data" :key="index">
						<img :src="item.bannerfile.url" class="w-full" />
					</el-carousel-item>
				</el-carousel>
			</unicloud-db>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
